import PageWrapper from "@/components/pageWrapper"
import QuestionCheckbox from "@/components/QuestionComponent/QuestionCheckbox"
import QuestionInfo from "@/components/QuestionComponent/QuestionInfo"
import QuestionInput from "@/components/QuestionComponent/QuestionInput"
import QuestionParagraph from "@/components/QuestionComponent/QuestionParagraph"
import QuestionRadio from "@/components/QuestionComponent/QuestionRadio"
import QuestionTextarea from "@/components/QuestionComponent/QuestionTextarea"
import QuestionTitle from "@/components/QuestionComponent/QuestionTitle"
import { getQuestionById } from "@/services/question"
import { componentType } from "@/types/component"
import { GetServerSidePropsContext } from "next/types"





type propsType = {
  errno: number,
  msg?: string,
  data?: {
    _id: string,
    name?: string,
    title?: string,
    desc?: string,
    js?: string,
    css?: string,
    isPublished?: true,
    isDelected?: false,
    componentList: Array<any>
  }
}


const getComponent = (comp: componentType) => {
  const { isHidden, type, props = {}, fe_id } = comp
  if (isHidden) return null
  if (type === 'questionInfo')
    return <QuestionInfo fe_id={fe_id} props={props} />
  else if (type === 'questionInput')
    return <QuestionInput fe_id={fe_id} props={props} />
  else if (type === 'questionRadio')
    return <QuestionRadio fe_id={fe_id} props={props} />
  else if (type === 'questionCheckbox')
    return <QuestionCheckbox fe_id={fe_id} props={props} />
  else if (type === 'questionTextarea')
    return <QuestionTextarea fe_id={fe_id} props={props} />
  else if(type === 'questionTitle')
    return <QuestionTitle fe_id={fe_id} props={props} />
  else if (type === 'questionParagraph')
    return <QuestionParagraph fe_id={fe_id} props={props}></QuestionParagraph>
  return null
}

export default function Question(props: propsType) {
  const { data, errno, msg = '' } = props
  const { _id = '', title, desc, componentList, isDelected, isPublished } = data || {}



  if (errno !== 0) return (
     <PageWrapper title={title} desc={msg}>
    <h1>{title}</h1>
    <p>{desc}</p>
  </PageWrapper>
  )
 



  if (isDelected) return (
    <PageWrapper title={title} desc={msg}>
    <h1>该问卷已被删除</h1>
    <p>{desc}</p>
  </PageWrapper>
  )
  

  if (!isPublished) return (
      <PageWrapper title={title} desc={msg}>
      <h1>该问卷未发布</h1>
      <p>{desc}</p>
    </PageWrapper>
  )
   



  const componentElemList = <>
    {componentList?.map((comp: componentType) => {
      return <div key={comp.fe_id} >
        {getComponent(comp)}
      </div>
    })}
  </>






  return (
    <PageWrapper title={title}>
      <form action="/api/answer" method="post"   >
        <input  type="hidden" name="questionId" value={_id} />
        {componentElemList}
        {/* 阻止跳转 */}
        <div style={{ width: '100%', textAlign: "center" }}>
          <button type="submit" style={{ backgroundColor: "#4CAF50", color: "white", border: "none",  borderRadius: "5px",width: "115px", height: "30px", cursor: "pointer" }} >提交</button>
        </div>

      </form>
    </PageWrapper>
  )
}

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const id = typeof context.params?.id === 'string'
    ? context.params.id
    : "";
  const data = await getQuestionById(id)
  return {
    props: {
      ...data
    }
  }
}